{% extends "base.html" %}

{% block title %}数据管理 - 安居客租房数据爬取系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-12">
        <!-- 统计卡片 -->
        <div class="row mb-4">
            <div class="col-xl-3 col-md-6">
                <div class="card bg-primary text-white mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <div class="text-xs font-weight-bold text-uppercase mb-1">总数据量</div>
                                <div class="h5 mb-0" id="totalCount">加载中...</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-database fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card bg-success text-white mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <div class="text-xs font-weight-bold text-uppercase mb-1">平均价格</div>
                                <div class="h5 mb-0" id="avgPrice">加载中...</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-yuan-sign fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card bg-info text-white mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <div class="text-xs font-weight-bold text-uppercase mb-1">覆盖城市</div>
                                <div class="h5 mb-0" id="cityCount">加载中...</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-city fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="card bg-warning text-white mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <div class="text-xs font-weight-bold text-uppercase mb-1">最近更新</div>
                                <div class="h5 mb-0" id="lastUpdate">加载中...</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-clock fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 搜索和筛选区域 -->
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="fas fa-filter me-2"></i>数据筛选</h5>
            </div>
            <div class="card-body">
                <form id="searchForm">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label for="searchKeyword" class="form-label">关键词搜索</label>
                            <input type="text" class="form-control" id="searchKeyword"
                                   placeholder="搜索标题、地址、经纪人...">
                        </div>
                        <div class="col-md-2">
                            <label for="filterCity" class="form-label">城市</label>
                            <select class="form-select" id="filterCity">
                                <option value="">全部城市</option>
                                {% for city in config.SUPPORTED_CITIES %}
                                    <option value="{{ city }}">{{ city }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="filterDistrict" class="form-label">区域</label>
                            <select class="form-select" id="filterDistrict">
                                <option value="">全部区域</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="filterRoomType" class="form-label">户型</label>
                            <select class="form-select" id="filterRoomType">
                                <option value="">全部户型</option>
                                {% for room_name, room_value in config.ROOM_TYPES.items() %}
                                    {% if room_value %}
                                        <option value="{{ room_value }}">{{ room_name }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="filterSourceType" class="form-label">房源来源</label>
                            <select class="form-select" id="filterSourceType">
                                <option value="">全部来源</option>
                                {% for source_name, source_value in config.SOURCE_TYPES.items() %}
                                    {% if source_value %}
                                        <option value="{{ source_value }}">{{ source_name }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="row g-3 mt-2">
                        <div class="col-md-3">
                            <label for="minPriceFilter" class="form-label">最低价格</label>
                            <input type="number" class="form-control" id="minPriceFilter" placeholder="0">
                        </div>
                        <div class="col-md-3">
                            <label for="maxPriceFilter" class="form-label">最高价格</label>
                            <input type="number" class="form-control" id="maxPriceFilter" placeholder="不限">
                        </div>
                          <div class="col-md-3">
        <label for="filterFavorite" class="form-label">收藏状态</label>
        <select class="form-select" id="filterFavorite">
            <option value="">全部</option>
            <option value="1">已收藏</option>
            <option value="0">未收藏</option>
        </select>
    </div>
                        <div class="col-md-3">
                            <label for="sortField" class="form-label">排序字段</label>
                            <select class="form-select" id="sortField">
                                <option value="crawl_time">爬取时间</option>
                                <option value="price">价格</option>
                                <option value="area">面积</option>
                                <option value="created_at">创建时间</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="sortOrder" class="form-label">排序顺序</label>
                            <select class="form-select" id="sortOrder">
                                <option value="DESC">降序</option>
                                <option value="ASC">升序</option>
                            </select>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-search me-1"></i>搜索
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" id="resetFilters">
                                        <i class="fas fa-redo me-1"></i>重置
                                    </button>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-success" id="exportData">
                                        <i class="fas fa-download me-1"></i>导出数据
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- 数据表格区域 -->
        <div class="card">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-table me-2"></i>房源数据列表</h5>
                <div class="d-flex align-items-center">
                    <span class="me-2">每页显示:</span>
                    <select class="form-select form-select-sm" id="pageSize" style="width: auto;">
                        <option value="10">10条</option>
                        <option value="20" selected>20条</option>
                        <option value="50">50条</option>
                        <option value="100">100条</option>
                    </select>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <!-- 更新表格表头 -->
<table class="table table-striped table-hover" id="housesTable">
    <thead>
        <tr>
            <th width="40">
                <input type="checkbox" id="selectAll" title="全选/全不选">
            </th>
            <th width="50">ID</th>
            <th width="200">标题</th>
            <th width="100">价格</th>
            <th width="100">户型</th>
            <th width="100">面积</th>
            <th width="100">城市</th>
            <th width="100">区域</th>
            <th width="100">来源</th>
            <th width="150">爬取时间</th>
            <th width="120">操作</th>
        </tr>
    </thead>
    <tbody id="housesTableBody">
        <tr>
            <td colspan="11" class="text-center py-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">加载中...</span>
                </div>
                <p class="mt-2 mb-0">数据加载中...</p>
            </td>
        </tr>
    </tbody>
</table>
                </div>

                <!-- 分页 -->
                <nav aria-label="数据分页" class="mt-4">
                    <ul class="pagination justify-content-center" id="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1">上一页</a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item disabled">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

<!-- 房源详情模态框 -->
<div class="modal fade" id="houseDetailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">房源详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="houseDetailContent">
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <p class="mt-2 mb-0">加载中...</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="editHouseBtn">编辑</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑房源模态框 -->
<div class="modal fade" id="editHouseModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑房源信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editHouseForm">
                    <input type="hidden" id="editHouseId">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="editTitle" class="form-label">标题</label>
                            <input type="text" class="form-control" id="editTitle" required>
                        </div>
                        <div class="col-md-6">
                            <label for="editPrice" class="form-label">价格(元/月)</label>
                            <input type="number" class="form-control" id="editPrice" step="0.01" required>
                        </div>
                        <div class="col-md-6">
                            <label for="editRoomType" class="form-label">户型</label>
                            <input type="text" class="form-control" id="editRoomType">
                        </div>
                        <div class="col-md-6">
                            <label for="editArea" class="form-label">面积(平米)</label>
                            <input type="number" class="form-control" id="editArea" step="0.01">
                        </div>
                        <div class="col-md-6">
                            <label for="editCity" class="form-label">城市</label>
                            <select class="form-select" id="editCity">
                                <option value="">请选择城市</option>
                                {% for city in config.SUPPORTED_CITIES %}
                                    <option value="{{ city }}">{{ city }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="editDistrict" class="form-label">区域</label>
                            <input type="text" class="form-control" id="editDistrict">
                        </div>
                        <div class="col-md-6">
                            <label for="editAddress" class="form-label">地址</label>
                            <input type="text" class="form-control" id="editAddress">
                        </div>
                        <div class="col-md-6">
                            <label for="editSourceType" class="form-label">房源来源</label>
                            <select class="form-select" id="editSourceType">
                                <option value="">请选择来源</option>
                                {% for source_name, source_value in config.SOURCE_TYPES.items() %}
                                    {% if source_value %}
                                        <option value="{{ source_value }}">{{ source_name }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-12">
                            <label for="editDescription" class="form-label">房源描述</label>
                            <textarea class="form-control" id="editDescription" rows="3"></textarea>
                        </div>
                        <div class="col-12">
                            <label for="editFeatures" class="form-label">房源特色</label>
                            <textarea class="form-control" id="editFeatures" rows="2"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="deleteHouseBtn">删除</button>
                <button type="button" class="btn btn-primary" id="saveHouseBtn">保存</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/data_management.js') }}"></script>
{% endblock %}